<script lang="ts" setup>
import { ref, reactive } from "vue";
import { jumpPath } from "@/utils/router-kit";
import { RoleEditUrl } from "@/views/org/mapping.json";
import roleServiceApi from "@/api/modules/org/bean/role";
import appServiceApi from "@/api/modules/org/bean/app";
import { deletePageTableSelectionDataList } from "@/utils/api-service";
import { JxtechPageTableColumn } from "@whjxtech/jxtech-component";
import { useJxtechPageTableExt } from "@/comp-ext";
const RoleListTableRef = ref();
const { deleteSelectionDataList } = useJxtechPageTableExt(RoleListTableRef);
const emit = defineEmits<{
  (e: "onAddButtonClick"): void;
  (e: "onDeleteButtonClick"): void;
}>();
const RoleTableState = reactive({
  queryColumn: [{ name: "likeAll", type: "input", label: "模糊搜索", placeholder: "请输入角色名称/描述" }],
  /**查询参数 */
  queryParam: { likeAll: null },

  /**
   * 表格的列配置
   */
  tableColumn: [
    { label: "序号", width: "50", type: "selection" },
    { label: "序号", width: "60", type: "index" },
    {
      prop: "appName",
      label: "所属应用",
      width: "180",
      columnKey: "appId",
      showOverflowTooltip: true,
      filter: {
        type: "function",
        loadData: () => appServiceApi.queryManagedApplication(),
        textKey: "appName",
        valueKey: "appId"
      }
    },
    {
      prop: "roleName",
      label: "角色名称",
      sort: { sortable: "custom" },
      type: "link",
      showOverflowTooltip: true,
      linkClick: (row: any) => jumpPath(RoleEditUrl + row.roleId),
      align: "left"
    },
    {
      prop: "roleTypeName",
      width: "150",
      label: "角色类型",
      columnKey: "roleType",
      type: "string",
      filter: { type: "dictionary", codeItemId: "ROLE_TYPE" }
    },
    { prop: "roleDescription", label: "描述", align: "left", showOverflowTooltip: true },
    {
      prop: "common",
      label: "是否公用",
      width: "100",
      slot: "customCommon",
      columnKey: "common",
      filter: {
        type: "static",
        filters: [
          { value: "Y", text: "是" },
          { value: "N", text: "否" }
        ]
      }
    }
  ] as JxtechPageTableColumn[],
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) => roleServiceApi.queryPage(null, { ...params, ...RoleTableState.queryParam, refCols: "default" }),
  /**
   * 表格导出excel的方法
   */
  expData: (params: any) => {
    return roleServiceApi.exportData(null, { ...params, ...RoleTableState.queryParam });
  },
  /**
   * 表格删除事件
   */
  deleteTableData: () => {
    deleteSelectionDataList(roleServiceApi);
  },

  /**
   * 查询事件
   */
  handleSearch: () => RoleListTableRef.value.loadTable(),
  onAddButtonClick: () => {
    emit("onAddButtonClick");
  },
  onDeleteButtonClick: () => {
    emit("onDeleteButtonClick");
  }
});

defineExpose({
  getListTableRef: () => RoleListTableRef.value,
  deleteTableData: () => RoleTableState.deleteTableData()
});
</script>
<template>
  <jxtech-basic-card title="角色信息">
    <template #operationSpace>
      <jxtech-search-input tips="角色名称/描述" v-model="RoleTableState.queryParam.likeAll" @search="RoleTableState.handleSearch">
      </jxtech-search-input>
      <jxtech-add-button @click="RoleTableState.onAddButtonClick" v-auth="'org:qxgl:jsyqx:save'"> </jxtech-add-button>
      <jxtech-delete-button @click="RoleTableState.onDeleteButtonClick" v-auth="'org:qxgl:jsyqx:delete'"> </jxtech-delete-button>
    </template>
    <JxtechPageTableExt
      ref="RoleListTableRef"
      row-key="roleId"
      :table-column="RoleTableState.tableColumn"
      :load-data="RoleTableState.loadData"
      :exp-data="RoleTableState.expData"
      full-table
      border
    >
      <template #customCommon="{ row }">
        <!-- <el-checkbox v-model="row.common" disabled></el-checkbox> -->
        <el-tag v-if="row.common == true" type="success" size="small">是</el-tag>
        <el-tag v-else type="danger" size="small">否</el-tag>
      </template>
    </JxtechPageTableExt>
  </jxtech-basic-card>
</template>
